テキスト : HTML
HTMLとは？
Hypertext Markup Language (ハイパーテキスト・マークアップ・ランゲージ : 組版指示)
Webサイトの骨組み
HTMLの目的の7割は「文書構造を作成すること」にあります。
例）
h1, h2 … : 見出し
p : 段落
触ってみよう
デスクトップに「study」というフォルダを作成（既に作成ずみの場合は飛ばしてもらってかまわない）
↓
「study」フォルダの中に「html」というフォルダを作成
↓
「html」フォルダの中に「helloworld.html」という名前でファイルを作成
↓
VScodeで「study」フォルダを開く。
CUI
code:console
$ mkdir study
$ cd study
$ mkdir html
$ cd html
$ touch helloworld.html
$ code ../
htmlと記載して「html:5」を選択
https://gyazo.com/4b3d3bc0668dac679b945f5a56e18257
htmlのテンプレートが記載される。
ここで「lang」の部分を「en」から「ja」に変更する。
https://gyazo.com/ebe8d2bcc95753e72c58f3514b7d62d0
以下、Hello Worldを記載
code:helloworld.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- titleの 中身を変更 -->
<title>Hello World</title>
</head>
<body>
<!-- ↓を追加 -->
<h1>Hello World!</h1>
</body>
</html>
ブラウザにドラッグ&ドロップで画面に「Hello World!」が表示されればOK
その他の主要タグについて、
以下のsample.htmlを書いてください。
code:sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sample</title>
</head>
<body>
<h1>サンプル</h1>
<!-- 水平線 -->
<hr>
<!-- 見出し -->
<h2>h2の見出し</h2>
<h3>h3の見出し</h3>
<!-- 改行 -->
私の名前は<br>
○○です<br>
<!-- 画像 -->
<!-- srcの中のファイルは同じフォルダ内に用意する必要があります。 -->
<img src="kuma.png" width="100" height="120" alt="profile">
<!-- 段落 -->
<p>好きなことは○○です。</p>
<p>苦手なことは○○です。</p>
趣味は以下です。
<!-- リスト -->
<ul>
<li>読書</li>
<li>○○</li>
<li>○○</li>
</ul>
<table border="1">
<tr>
<th>プログラミング言語</th>
</tr>
<tr>
<td>Java</td>
</tr>
<tr>
<td>JavaScript</td>
</tr>
<tr>
<td>Python</td>
</tr>
</table>
<!-- 整形済みテキスト -->
<pre>
preタグの中では改行も反映されます。
文書の中のスペースや改行をそのまま表示したい場合はpreタグを使用します。
</pre>
<div>divの</div>
<div>要素</div>
<span>spanの</span>
<span>要素</span>
<!-- リンク -->
<!-- targetに_blankを指定するとリンク先を別ウィンドウを表示することができます -->
</body>
</html>
メモ
div : ブロック要素
span : インライン要素
エクササイズ
以下の表示結果となるようhtmlファイルを作成してください。
1)
十二支 : 子・丑・寅・卯・辰・巳・午・未・申・酉・戌・亥
※番号付きのリスト
https://gyazo.com/241768dfb17bd3f38ebdb55c86352b1e
2)
https://gyazo.com/a1f0cf883db05dae66f808e1ca6934e2
回答
改めてHTMLとは……
HTMLの今後
W3C→WHATWG
その他
iframe